<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="45%" top="20vh">
      <el-form :model="createForm" label-width="160px" label-suffix=":" :rules="rules" ref="createForm">
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="养护套餐名称" prop="themeName">
              <el-input v-model.trim="createForm.themeName" placeholder="请输入养护套餐名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="套餐类别" prop="themeType">
              <el-select v-model="createForm.themeType" placeholder="请选择套餐类别" style="width: 100%;">
                <el-option v-for="item in themeTypeList" :key="item.dictItemCode" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="是否通用" prop="commonFlag">
              <el-select v-model="createForm.commonFlag" placeholder="请选择是否通用" style="width: 100%;">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="createForm.commonFlag == '0'">
          <el-col :span="22">
            <el-form-item label="适用车型" prop="carType">
              <el-input v-model.trim="createForm.carType" placeholder="请点击图标选择车型" readonly>
                <i slot="prefix" class="el-input__icon el-icon-search" @click="onSearchCar"></i></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="状态" prop="enable">
              <el-select v-model="createForm.enable" placeholder="请选择状态" style="width: 100%;">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')">保 存</el-button>
      </div>
      <vehicle-model-dialog ref="vehicleModel" @ok="selectCarOk"></vehicle-model-dialog>
    </el-dialog>
  </div>
</template>

<script>
import VehicleModelDialog from "@/components/dialog/VehicleModelDialog";
import {
  themeModelAdd,
  themeModelUpdate
} from '@/api/theme'
import { getDictionaryItemMap } from "@/api/common";
export default {
  name: 'ThemeModelDialog',
  components: {
    VehicleModelDialog
  },
  data () {
    return {
      title: "",
      visible: false,
      createForm: {
        carType: "",
        carTypeId: ""
      },
      themeTypeList: [],
      rules: {
        themeName: [{ required: true, message: "请输入养护套餐名称", trigger: "blur" }],
        themeType: [{ required: true, message: "请选择套餐类别", trigger: "blur" }],
        commonFlag: [{ required: true, message: "请选择是否通用", trigger: "blur" }],
        carType: [{ required: true, message: "请选择车型", trigger: "blur" }],
        enable: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
    }
  },
  created () { },
  mounted () { },
  methods: {
    add () {
      this.title = "新增";
      this.createForm = {};
      this.init();
      this.visible = true;
    },
    edit (val) {
      this.title = "编辑";
      this.createForm = Object.assign({}, val);
      this.init();
      this.visible = true;
    },
    init () {
      getDictionaryItemMap({ codeArr: "themeType" }).then((res) => {
        let data = res.data;
        if (data && data.code == 0) {
          this.themeTypeList = data.data.themeType;
        }
      });
    },
    onSearchCar () {
      this.$refs.vehicleModel.select();
    },
    selectCarOk (val) {
      this.$set(this.createForm, "carTypeId", val.id);
      this.$set(this.createForm, "carType", val.vehicleModel);;
    },
    confirmData (formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.createForm.id) {
            themeModelUpdate(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('修改成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '修改失败')
              }
            })
          } else {
            themeModelAdd(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('新增成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '新增失败')
              }
            })
          }
        }
      });
    },
    closeNetWorker () {
      this.createForm = {};
      this.visible = false;
    }
  }
}
</script>

<style scoped></style>
